<template>
  <view class="page-container">
    <u-grid :border="false" @click="click" col="2">
      <u-grid-item
        v-for="(item, baseListIndex) in baseList"
        :key="baseListIndex"
        style="margin-top: 10px"
        @click="toDetail(item)"
      >
        <view class="consult-item consult-item1" style="margin-top: 0.5rem">
          <image :src="item.pic" mode="scaleToFill" />
          <text>{{ item.title }}</text>
          <text class="subtitle">{{ item.info }}</text>
        </view>
      </u-grid-item>
    </u-grid>
  </view>
</template>
  <script>
import consultAndServiceConst from "@/static/const/consultAndServiceConst";

export default {
  data() {
    return {
      baseList: [],
    };
  },
  onLoad(options) {
    this.getList();
  },
  methods: {
    getList() {
      this.$store
        .dispatch("ConsultAndServiceList", consultAndServiceConst.service)
        .then((res) => {
          console.log(res);
          this.baseList = res.data;
        });
    },
    toDetail(item) {
      uni.navigateTo({
        url: "/pages/law-service-detail/index?id=" + item.id,
      });
    },
  },
};
</script>
  <style scoped lang="scss">
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 5rem;
  .grid-content {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 11rem;
  }
  .card-wrapper {
    display: flex;
    flex-direction: column;
  }
  .consult-item {
    width: 95%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    //   0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    text {
      font-size: 1rem;
      font-weight: bolder;
      padding: 0.5rem;
    }
    .subtitle {
      font-size: 0.8rem;
      font-weight: normal;
      padding: 0rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .flex-row {
      justify-content: space-between;
      align-items: center;
      margin-top: 0.5rem;
      text {
        color: #e43d33;
        font-size: 1rem;
      }
      .btn {
        font-size: 0.8rem;
        color: #f56d23;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        line-height: normal;
        background-color: rgba(0, 0, 0, 0);
        padding-left: 0.5rem;
        padding-right: 0.5rem;

        height: 1.5rem;

        &::after {
          border: 1px solid #f56d23;
        }
      }
    }
  }
  image {
    width: 100%;
    height: 5rem;
  }
  .consult-item1 {
    min-height: 11rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
  }
}
</style>
  